{__NOLAYOUT__}
<script src="__STATIC__/js/jquery-3.3.1.min.js"></script>
<!--
<script src="__STATIC__/js/app.min.js"></script>
-->
<style type="text/css">
    .search{
        position:relative;
        width: 200px;
    }
    .search input{
        width: 200px;
        border: none;
        border: solid 1px #ddd;
        height:35px;
       line-height:35px;
        padding:0 10px;
    }
    .search input,.search button:focus{
        outline: none;
    }
    .search button{
        width: 20px;
        background: #00a0e9;
        border: none;
        height: 20px;
    }
    table{
        position: absolute;
        left: 0;
        width: 200px;
        border: solid 1px #e0e0e0;
        background:#fff;
        cellspacing:0;
    }

    table td{
        height: 0.6rem;
        padding-left: 15px;
    }
    .fields-group{
        width:60%;
        margin:0 auto;
        border:1px solid #eee;
        border-radius:4px;
        padding:10px;
        padding-bottom:30px;
    }
    .fields-group h2{
        color:#333 ;
        font-size:18px;
        border-bottom: 2px solid #3c8dbc;
        line-height:45px;
        padding:0;
        margin: 0;
    }
    .form-group{
        display: flex;
        padding-top:10px;
    }
    .form-group label{
        min-width:90px;
        line-height:35px;
    }
    .form-group .form-input{
        flex: 1;
        align-items: center;
    }
    .text-input{
        width: 200px;
        border: none;
        border: solid 1px #ddd;
        height:35px;
        line-height:35px;
        padding:0 10px;
    }
    .btn{
        background-color: #3c8dbc;
        border-color: #367fa9;
        border-radius: 3px;
        -webkit-box-shadow: none;
        box-shadow: none;
        border: 1px solid transparent;
        padding: 5px 10px;
        font-size: 12px;
        line-height: 1.5;
        width:60px;
        color:#fff;
    }
</style>


<div class="row">
    <div class="col-md-12">
        <div class="box box-primary">
            <form id="dataForm" class="form-horizontal dataForm" action="" method="post" enctype="multipart/form-data">
                <div class="box-body">
                    <div class="fields-group">
                        <h2>添加商品</h2>
                        <div class="form-group">
                            <label for="goods_name" class="col-sm-2 control-label">商品名称：</label>
                            <div class="form-input">
                                <section class="search">
                                    <div class="row">
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-user"></i></span>
                                            <input maxlength="30" id="goods_name" name="goods_name" placeholder="按照商品名称搜索" autocomplete="off">
                                        </div>
                                    </div>
                                </section>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="advance_price" class="col-sm-2 control-label">预售价格：</label>
                            <div class="col-sm-10 col-md-4">
                                <div class="input-group">
                                    <input type="hidden" maxlength="30" id="goods_id" name="goods_id" placeholder="按照商品名称搜索">
                                    <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
                                    <input readonly="readonly" maxlength="30" id="advance_price" name="advance_price"
                                           value="" class="text-input form-control readonly" placeholder="预售价格自动更新">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="price" class="col-sm-2 control-label">实际价格：</label>
                            <div class="col-sm-10 col-md-4">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
                                    <input maxlength="50" id="price" name="price"
                                           value="{$info.price|default=''}" class="text-input form-control" placeholder="请输入实际价格">
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="num" class="col-sm-2 control-label">商品数量：</label>
                            <div class="col-sm-10 col-md-4">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-phone"></i></span>
                                    <input maxlength="30" id="num" name="goods_num"
                                           value="{$info.num|default=''}" class="text-input form-control"
                                           placeholder="请输入购买数量">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="remark" class="col-sm-2 control-label">备注：</label>
                            <div class="col-sm-10 col-md-4">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-phone"></i></span>
                                    <input maxlength="30" id="remark" name="remark"
                                           value="{$info.remark|default=''}" class="text-input form-control"
                                           placeholder="请输入商品备注">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="num" class="col-sm-2 control-label"></label>
                            <input type='submit' value='提交' class="btn "/>
                        </div>
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>
<script>
    var goods_uid = "{$goods_uid}";
    window.onload = ListenerSearch();

    //实时监控搜索框文本输入事件
    function ListenerSearch(){
        //实时监控文本输入
        $("input[name='goods_name']").bind('input propertychange',function () {
            QueryKeyword($(this).val());
        });
    }

    //检索数组里是否有对应关键词
    function QueryKeyword(SearchName) {
        //初始化数组
        var Keyword = [];
        // 更新后台数据
        $.ajax({
            "url": "/api/order/goodsByName",
            "data": {
                name:SearchName,
                admin_uid:goods_uid
            },
            "type": "post",
            async:false,    // 必须同步
             success : function(data){
                for(var i=0;i<data.data.length;i++){
                    //添加数据
                    Keyword.push(data.data[i]);
                }
             },
             error:function(data){
                 alert("查询失败");
             }
        });
        if(Keyword.length != 0){

            //创建table表单
            CreateTable(Keyword);
        } else {
            //删除table表单
            RemoveTable();
        }
    }

    //监控table表单点击事件,修改input内容
    function TableOnclick(id,price) {

        console.info("aaaaaaa creatsbbb："+price);
        $("#goods_name").val($("#"+id).html())
        $("#goods_id").val(id)
        $("#advance_price").val(price)

        //$("#goods_id").val(id);
        $("#Table").remove();
    }

    //创建table表单
    function CreateTable(Keyword) {
        var TableContent = "";

        for(var i = 0; i < Keyword.length; i++){
            TableContent += "" +
                "<tr>" +
                "<td id='"+Keyword[i].id+"' onclick='TableOnclick(this.id,"+Keyword[i].advance_price+")'>"+Keyword[i].name+"</td>" +
                "</tr>";

            console.info("aaaaaaa creats："+TableContent);

        }
        //table表单不存在时进行创建
        if(!document.getElementById("#Table")){
            var Table = document.createElement('table');
            Table.id = "Table";
            $(".search").append(Table);
        }
        $("#Table").html(TableContent);
    }

    //删除table表单
    function RemoveTable() {
        $("#Table").remove();
    }
</script>
